// import 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'
class Slidshow {
    constructor() {
        this.imgList = $('.banner_imglist img')//获取所有img
        this.btnList = $('.banner_btnlist li')//获取所有小按钮
        this.Left = $('.btnleft')//左按钮
        this.Right = $('.btnright')//右按钮
        this.index = null //初始化索引
        this.t = null
    }
    init() {
        let _this = this
        this.btnList.on('mouseover', function () {
            _this.index = $(this).index()

            $(this).addClass('active').siblings().removeClass('active')
            _this.imgList.eq(_this.index).addClass('active').siblings().removeClass('active')
        })
        this.Right.on('click', () => {
            this.index++
            if (this.index > this.btnList.length - 1) {
                this.index = 0
            }
            this.adddeleClass()
        })
        this.Left.on('click', () => {
            this.index--
            if (this.index < 0) {
                this.index = this.btnList.length - 1
            }
            this.adddeleClass()
        })
        //自动播放
        this.t = setInterval(() => {
            this.Right.click()
        }, 3000);
        //鼠标移入停止定时器
        $(this.imgList.parent().parent()).hover(function () {
            clearInterval(_this.t)
        }, function () {
            _this.t = setInterval(() => {
                _this.Right.click()
            }, 3000);
        })
        //鼠标进入按键添加类，移出移除类
        this.Right.hover(function () {
            $(this).addClass('btnActive')
        }, function () {
            $(this).removeClass('btnActive')
        })

        this.Left.hover(function () {
            $(this).addClass('btnActive')
        }, function () {
            $(this).removeClass('btnActive')
        })
    }
    //对应的索引添加类，兄弟元素移除类
    adddeleClass() {
        this.btnList.eq(this.index).addClass('active').siblings().removeClass('active')
        this.imgList.eq(this.index).addClass('active').siblings().removeClass('active')
    }
}
export {
    Slidshow
}